<template>
    <div class="login">
      <input class="userid" id="username" type="text" v-model="username" @blur="number" placeholder="会員ID
"/>
      <input class="userid" type="password" v-model="password" @blur="passwords" placeholder="パスワード"/>
      <div class="logins" @click="login">ログイン</div>
    </div>
</template>
<script>
  import Vue from "vue"
  import { Toast } from 'vant';

  Vue.use(Toast);
    import axios from "axios"
    export default {
        name: "login",
      data(){
          return {
            username:"",
            password:"",
            alt:"",
            userid:""

          }
      },
      methods:{
        number(){
          console.log(this.username)
        },
        passwords(){
          console.log(this.password)
        },
        login(){
          axios.post('http://auction.growthupup.com/wap/user/login?username='+this.username+"&password="+this.password)
            .then(res=>{
              console.log(res)
              if(res.data.success){
              this.userid = res.data.data.id
                this.$router.push("/?brandUserId="+this.userid)
                this.$router.push({
                  path: '/',
                  query: {
                    brandUserId: this.userid
                  }
                })
              }else{
                this.$toast('正しいIDとパスワードを入力してください。');
              }
            })
        }
      }
    }
</script>

<style scoped>
  #username{
    background-color: white!important;
  }
  body{
    height: 100%;
    background: white;
  }
.btn {
  margin: 0 auto;
}
.login{
     padding-top: 2rem;
      background: white;

}
  .userid {
    border: none;
    outline: none;
    border-bottom: 2px solid #E5E5E5;
    width: 2.6rem;
    padding-bottom: 8px;
    display: block;
    margin: 0 auto;
    margin-bottom: .6rem;
  }
  .logins{
    width: 2.6rem;
    height: .53rem;
    background: black;
    text-align: center;
    line-height: .53rem;
    margin: 0 auto;
    color: white;
  }
</style>
